import { Button, Space } from "antd"
import { useEffect, useMemo, useState } from "react"

const EffectDemo = () => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('useEffect中的count：', count)
  }, [count])

  // 不该重新渲染的
  const countObj = { key: 1 }
  useEffect(() => {
    console.log('useEffect中的countObj：', countObj)
  }, [countObj])

  // useMemo 优化后，组件重新渲染时不会重新执行
  const memoObj = useMemo(() => ({ key: 222 }), [])
  useEffect(() => {
    console.log('useEffect中的memoObj：', memoObj)
  }, [memoObj])
  return (
    <>
      <h3>--监听器</h3>
      <Space>
        <Button onClick={() => setCount(count + 1)}>
          count: {count}
        </Button>
        <span>useEffect：打开控制台查看根据 count 和 countObj</span>
      </Space>
      <ul>
        <li>实际上这里 countObj 在组件中是 useEffect 的依赖项</li>
        <li>组件在重新渲染时， React 都会重新创建一次新的 countObj 从而导致可能不必要的大量计算</li>
        <li>所以将 countObj 包裹在 useMemo 中避免过多重新计算</li>
        <li>事实上， useMemo 是为了缓存需要大量计算的任务</li>
      </ul>
    </>
  )
}

export default EffectDemo
